import Vue from 'vue'
import Router from 'vue-router'
import html from '@/components/cell/html'
import css from '@/components/cell/css'
import js from '@/components/cell/js'
import vue from '@/components/cell/vue'
import node from '@/components/cell/node'
import audio from '@/components/content/audio'
import video from '@/components/content/video'
import input from '@/components/content/inputBox'
import flex from '@/components/content/flex'
import transform from '@/components/content/transform'
import transition from '@/components/content/transition'
import object from '@/components/content/object'
import array from '@/components/content/array'
import function1 from '@/components/content/function'
import express from '@/components/content/express'
import koa2 from '@/components/content/koa2'
import router from '@/components/content/router'
import axios from '@/components/content/axios'



Vue.use(Router)


let  path=new Router({
  routes: [
    {
      path: '/',
      redirect:'/html'
    },
    {
      path: '/html',
      name: 'html',
      component: html,
      children:[
        {path:'/html',component:audio,redirect:'/html/audio',name:'htmlC'},
        {path:'/html/audio',component:audio},
        {path:'/html/video',component:video},
        {path:'/html/input',component:input},
      ]
    },
      {
      path: '/css',
      name: 'css',
      component: css,
      children:[
        {path:'/css',component:flex,redirect:'/css/flex'},
        {path:'/css/flex',component:flex},
        {path:'/css/transform',component:transform},
        {path:'/css/transition',component:transition},
      ]
    },
    {
      path: '/js',
      name: 'js',
      component: js,
      children:[
        {path:'/js',component:object,redirect:'/js/object'},
        {path:'/js/object',component:object},
        {path:'/js/array',component:array},
        {path:'/js/function',component:function1},
      ]
    },
    {
      path: '/node',
      name: 'node',
      component: node,
      children:[
        {path:'/node',component:express,redirect:'/node/express'},
        {path:'/node/express',component:express},
        {path:'/node/koa2',component:koa2},
      ]
    },
    {
      path: '/vue',
      name: 'vue',
      component: vue,
      children:[
        {path:'/vue',component:router,redirect:'/vue/router'},
        {path:'/vue/router',component:router},
        {path:'/vue/axios',component:axios},
      ]
    },
  ],
  linkActiveClass:'currency',
  mode: 'history',
});
path.beforeEach((to, from, next) => {
  const matched = path.getMatchedComponents(to); // 是否有匹配组件
  // 配置404页面
  if (matched.length > 0) {
    next();
    // }
  } else {
    next({
      name: 'htmlC',
    });
  }
});
export default path;